<template>
  <div class="aurora-container">
    <!-- <Aurora
      :color-stops="['#4084EF', '#7cff67', '#FFEAA4']"
      :amplitude="1.0"
      :blend="0.5"
      :speed="1.0"
      :intensity="1.0"
      class="w-full h-full"
    /> -->
    <div class="login-container">
      <div class="introduction-container">
        <p>网络暴力</p>
        <p>法律援助平台</p>
      </div>
      <!-- <div class="logo-container">
        <div class="logo-container">
          <Transition :name="transitionName" mode="out-in">
            <div :key="currentLogo.id" class="logo-item">
              <img
                style="width: 6.5rem"
                :src="currentLogo.src"
                :alt="currentLogo.alt"
              />
              <p>{{ currentLogo.text }}</p>
            </div>
          </Transition>
        </div>
      </div> -->
      <div class="login-form-container">
        <div>
          <p class="title">登录</p>
          <a-form :label-col="{ span: 4 }" :model="loginForm">
            <a-form-item
              label="用户名"
              :colon="false"
              name="username"
              :rules="[{ required: true, message: '请输入用户名!' }]"
            >
              <a-input
                v-model:value="loginForm.username"
                placeholder="请输入用户名"
                style="background-color: rgba(72, 72, 72, 0.1)"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="密码"
              :colon="false"
              name="password"
              :rules="[{ required: true, message: '请输入密码!' }]"
            >
              <a-input-password
                v-model:value="loginForm.password"
                placeholder="请输入密码"
                style="background-color: rgba(72, 72, 72, 0.1)"
              ></a-input-password>
            </a-form-item>
            <a-form-item name="remember">
              <a-checkbox v-model:checked="loginForm.remember"
                >记住我</a-checkbox
              >
              <a class="login-form-forgot" href="">忘记密码?</a>
            </a-form-item>
            <a-form-item>
              <a-button
                style="width: 100%"
                type="primary"
                html-type="submit"
                @click="goLogin"
                >登录</a-button
              >
              <p
                style="
                  width: 100%;
                  margin-top: 5px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                或者 <a style="margin-left: 5px" href="">立即注册!</a>
              </p>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted, reactive } from "vue";
import Aurora from "./Aurora.vue";
import RotatingText from "./RotatingText.vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";

const router = useRouter();

const logos = [
  {
    id: 1,
    src: "/src/assets/Login/logos/first-logo.png",
    text: "法律咨询",
    alt: "法律咨询图标",
  },
  {
    id: 2,
    src: "/src/assets/Login/logos/second-logo.png",
    text: "交流心得",
    alt: "法律援助图标",
  },
];
const currentIndex = ref(0);
const transitionName = ref("fade");
let timer: any = null;
const loginForm = reactive({
  username: "",
  password: "",
  remember: true,
});

const currentLogo = computed(() => logos[currentIndex.value]);

const goLogin = () => {
  router.push("/");
  message.success("登录成功");
};

onMounted(() => {
  startCarousel();
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

const startCarousel = () => {
  timer = setInterval(() => {
    transitionName.value = "fade";
    currentIndex.value = (currentIndex.value + 1) % logos.length;
  }, 3000); // 每3秒切换一次
};
</script>

<style scoped lang="scss">
.aurora-container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #dff6ff;
  background-image: url("@/assets/Login/bg-img.png");
  background-size: cover;
}
.login-container {
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .introduction-container {
    margin-left: 0.25rem;
    color: #fff;
    // font-style: italic;
  }
  .logo-container {
    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.65rem;
    }
  }
  .login-form-container {
    font-size: 0.2rem;
    width: 6.5rem;
    height: 100vh;
    background-color: rgba(72, 72, 72, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.179);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    > div {
      width: 100%;
      padding: 0.225rem;
      .title {
        color: #fff;
        font-size: 0.375rem;
        margin-bottom: 0.25rem;
      }
    }
  }
}
.login-form-forgot {
  float: right;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.8s ease;
}

.fade-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.login-form-forgot {
  float: right;
}
::v-deep(.ant-input) {
  background-color: rgba(72, 72, 72, 0.1);
}
</style>